<template>
    <div>
        <div class="activity-right"  style="padding-top:20px;">
            <h1>代购礼包列表</h1>
            <el-form ref="form" style="width:80%;" :model="form" label-width="100px">
                <el-select style="width:400px" v-model="form.soldout" placeholder="选择礼包状态" @change="handlChange">
                    <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value" >
                    </el-option>
                </el-select>
                <el-input class='search-input' style="width:30%"   clearable prefix-icon="el-icon-search" v-model="name" placeholder="礼包查询信息"></el-input>
                <el-button type="primary" @click="searchGift">搜索礼包</el-button>
                <el-button class="right"  style="margin-bottom:20px;" type="primary" @click="addGiftPack">新增代购礼包 </el-button>
            </el-form>
            <section class="table" >
                <el-table class="table-common" ref="multipleTable" :data="goodsList" tooltip-effect="dark" style="width: 100%"  v-loading="loading">
                    <el-table-column prop="goodsPic" label="礼包图片" width="180" >
                        <template slot-scope="scope">
                            <img style="width:60%"  :src="scope.row.goodsPic" alt="">
                        </template>
                    </el-table-column>
                    <el-table-column label="礼包编号" prop="goodsCode" width="150">
                    </el-table-column>
                    <el-table-column label="礼包名称" prop="goodsName" width="150">
                    </el-table-column>
                    <el-table-column prop="goodsPrice" label="礼包价格" width="120">
                    </el-table-column>
                    
                    <el-table-column prop="goodsPrice" label="礼包状态" width="120">
                        <template slot-scope="scope">{{scope.row.soldout == 2 ? '上架' : '下架' }}</template>
                    </el-table-column>
                    <el-table-column label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="editGiftPack(scope)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <section class="pagination">
                    <el-pagination 
                        background 
                        layout="total,prev,sizes, pager, next,jumper" 
                        :page-sizes="[10, 25, 50, 100]"
                        :page-size="size" 
                        :page-count="Math.ceil(total/size)" 
                        :total="total" 
                        @size-change="handleSizeChange"
                        :current-page.sync="page" @current-change="handlePageChange">
                    </el-pagination>
                </section>
            </section>
        </div>
    </div>
</template>
<script>
import leftBar from "../commonComponents/leftBar.vue";
import { mapActions, mapState } from "vuex";
import {
    updateGoods,
    getCategory,
    getStockGoodsList,
    editGoodsByPc,
    getGiftPackList
} from "../../data/postData";
export default {
    components: {
        leftBar
    },
    data() {
        return {
            user: JSON.parse(localStorage.getItem("ddaigoUser")),
            form: {
                goods_pic: "",
                goods_code: "",
                category_id: "",
                goods_name: "",
                specs_name: "",
                soldout:''
            },
            option:[
                {
                    value: '',
                    label: '全部'
                },
                {
                    value: 1,
                    label: '下架'
                },{
                    value: 2,
                    label: '上架'
                }
            ],
            name:'',
            loading:false,
            searchName: "",
            goodsList: null,
            total: null,
            page: this.$store.state.gift.giftListPage,
            size: 10,
        };
    },
    mounted() {
        var that = this;
        let { giftListPage} = this.$store.state.gift;
       // this.page = giftListPage || 1;
        this.searchRequest(this.page);
    },
    methods: {
        handlChange(){
            this.page = 1
            this.searchRequest(this.page)
        },
        searchGift(){
            this.page = 1
            this.searchRequest(this.page)
        },
        handleSizeChange(size){
            this.size = size;
            this.searchRequest(this.page)
        },
        //新增代购礼包
        addGiftPack(){
            this.$router.push({path:'/addGiftPack'})
        },
        //编辑礼包
        editGiftPack(scope){
            this.$router.push({path:'/editGiftPack/' + scope.row.goodsId})
        },
        selDone(val, name) {
            this.goodsItem[2] = {
                val: val,
                name: name
            };
            this.isShowGoodsItem = false;
        },
        handlePageChange(page) {
            this.page = page;
            this.searchRequest(this.page);
            this.$store.dispatch("saveGiftListPage", this.page);
        },
        searchRequest(page) {
            var params = {
                "data": {
                    "page":page,
                    "size":10,
                    "name" : this.name,
                    "soldout" : this.form.soldout
                }
            }
            this.$fetch.post(getGiftPackList, params).then(res=>{
                
                this.goodsList = res.data
                this.total = res.total
            })
        }   
    }
};
</script>

<style scoped lang="less">
.el-form-item {
    display: inline-block;
}
.pl {
    margin: 10px 0;
}
.page {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}
.activity-right {
    h1 {
        font-size: 24px;
        margin-bottom: 20px;
    }
    .addGoods {
        margin-bottom: 20px;
        position: absolute;
        right: 0;
        top: 0;
    }
}
.el-form {
    width: 100% !important;
}
.goodsItem {
    position: relative;
    display: inline-block;
    width: 75%;
    .selGoodsItem {
        width: 179px;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        height: 40px;
        line-height: 40px;
        text-align: center;
        display: inline-block;
        cursor: pointer;
    }
    section {
        position: absolute;
        left: 10px;
        top: 48px;
        background: #fff;
        border: 1px solid #e4e7ed;
        z-index: 99999;
        &:after {
            content: "";
            position: absolute;
            top: -8px;
            left: 75px;
            display: block;
            width: 0;
            height: 0;
            border-bottom: 8px solid #e4e7ed;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
        }
        &:before {
            content: "";
            position: absolute;
            top: -6px;
            left: 76px;
            display: block;
            width: 0;
            height: 0;
            border-bottom: 6px solid #fff;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            z-index: 99999;
        }
    }
}
.search-2 {
    position: absolute;
    left: 400px;
    bottom: 0px;
    width: 200px;
}
.pagination {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}
.table {
    img {
        width: 100%;
    }
}
.jumpPage {
    position: absolute;
    right: 0;
    bottom: 0;
    // width: 300px;
    input,
    .el-input {
        display: inline-block;
    }
}
.search-input {
    width: 200px;
}
.right {
    float: right;
    z-index: 999999999;
}
</style>